<section class="page-content-wrapper">
			<div class="container">
				<div class="row">
					<div class="content-full pt-50 pb-55 fix">
						<div class="col-md-12">
							<!--NAV PILL-->
							<div class="shop-tab-pill">
								<div class="nav-menu-grid">
									<ul class="nav nav-pills">
										<li>
											<a data-toggle="pill" routerLink="/shopSidebar/shopgrid" routerLinkActive="active"><i class="icon_grid-2x2"></i></a>
										</li>
										<li>
											<a data-toggle="pill" routerLink="/shopSidebar/shoplist" routerLinkActive="active"><i class="icon_menu"></i></a>
										</li>
									</ul>
								</div>
								<div class="show-more text-center">
									<h6>250 products Founde</h6>
									<ul>
										<li class="shw">Show</li>
										<li [class.active]="showNumber.active" (click)="changeNumber(showNumber.number)" *ngFor="let showNumber of showNumbers">
												<a>{{showNumber.number}}</a>
										</li>
										
									</ul>
								</div>
								<div class="sorting text-right">
									<a href="#">Default Sorting<span class="icon-left" data-icon="&#x24;"></span></a>
								</div>
							</div>
							<!-- NAV PILL -->
						</div>
						<!-- Left Side Start -->
						<div class="col-md-3">
							<div class="right-area pt-35">
								<div class="product-filter">
									<h6>product filter</h6>
									<!-- Category Product -->
									<div class="category mt-50">
										<h4>categories</h4>
										<div class="category-list mt-20">
											<ul>
												<li>
													<a ><i class="zmdi zmdi-chevron-right"></i>Body & Skin Care<span>20</span></a>
												</li>
												<li>
													<a ><i class="zmdi zmdi-chevron-right"></i>Face-Powder<span>26</span></a>
												</li>
												<li>
													<a ><i class="zmdi zmdi-chevron-right"></i>Bridal Make-Up<span>15</span></a>
												</li>
												<li>
													<a ><i class="zmdi zmdi-chevron-right"></i>Accessories<span>22</span></a>
												</li>
											</ul>
										</div>
									</div>
									<!-- Category Product -->
									<!-- Color Widget -->
									<div class="category mt-50">
										<h4>Color</h4>
										<ul class="color-widget mt-30">
											<li class="active white"></li>
											<li class="orange"></li>
											<li class="green"></li>
											<li class="blue"></li>
											<li class="pink"></li>
										</ul>
									</div>
									<!-- Color Widget -->
									<!-- Size Widget -->
									<div class="category mt-50">
										<h4>SIZE</h4>
										<ul class="size-widget mt-30">
											<li><a href="#">S</a></li>
											<li><a href="#">M</a></li>
											<li><a href="#">L</a></li>
											<li><a href="#">XL</a></li>
											<li><a href="#">XXL</a></li>
										</ul>
									</div>
									<!-- Size Widget -->
									<!-- Price Range -->
									<div class="category mt-50">
										<h4>PRICE RANGE</h4>
										<div class="price-range mt-30">
											<div class="price-filter">
												<div id="slider-range"></div>
												<div class="price-slider-amount">
													<input type="text" id="amount" name="price"  placeholder="Your Price" />
													<input type="submit"  value="Filter">  
												</div>
											</div>
										</div>
									</div>
									<!-- Price Range -->
								</div>
								<div class="product-filter mt-50">
									<h6>new arrival</h6>
									<div class="new-arrival-area">
										<!-- Arrival Single --> 
										<div class="new-arrival-single mt-50 mb-30">
											<div class="arrival-thumbnail">
												<img src="../assets/img/arrival/1.jpg" alt="" />
											</div>
											<div class="arrival-content">
												<h6><a href="#">Mix Oill Control Cream</a></h6>
												<div class="price-box">
													<span class="old-price">$40.00</span>
													<span class="new-price">$80.00</span>
												</div>
											</div>
										</div>
										<!-- Arrival Single -->
										<!-- Arrival Single --> 
										<div class="new-arrival-single mb-30">
											<div class="arrival-thumbnail">
												<img src="../assets/img/arrival/2.jpg" alt="" />
											</div>
											<div class="arrival-content">
												<h6><a href="#">Whitening Powder</a></h6>
												<div class="price-box">
													<span class="old-price">$40.00</span>
													<span class="new-price">$80.00</span>
												</div>
											</div>
										</div>
										<!-- Arrival Single --> 
										<!-- Arrival Single --> 
										<div class="new-arrival-single mb-30">
											<div class="arrival-thumbnail">
												<img src="../assets/img/arrival/3.jpg" alt="" />
											</div>
											<div class="arrival-content">
												<h6><a href="#">Multi Color Eye Sha-dows</a></h6>
												<div class="price-box">
													<span class="old-price">$40.00</span>
													<span class="new-price">$80.00</span>
												</div>
											</div>
										</div>
										<!-- Arrival Single --> 
										<!-- Arrival Single --> 
										<div class="new-arrival-single">
											<div class="arrival-thumbnail">
												<img src="../assets/img/arrival/4.jpg" alt="" />
											</div>
											<div class="arrival-content">
												<h6><a href="#">Blashan Bea-uty Blende</a></h6>
												<div class="price-box">
													<span class="old-price">$40.00</span>
													<span class="new-price">$80.00</span>
												</div>
											</div>
										</div>
										<!-- Arrival Single --> 
									</div>
								</div>
							</div>
						</div>
						<!-- Left Side End -->
						<!-- Right Side Start -->
						<div class="col-md-9">
							<div class="tab-content">
								<router-outlet></router-outlet>
							</div>
						</div>
						<!-- Right Side End -->
						<!-- Page Pagination Start -->
						<div class="col-md-12">
							<div class="page-pagination text-center pt-50 sm-p-0">
								<ul>
									<li class="active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li class="next"><a href="#"><span class="icon-left" data-icon="&#x24;"></span></a></li>
								</ul>
							</div>
						</div>
						<!-- Page Pagination End -->
					</div>
				</div>
			</div>
		</section>